$(function () {
  // 导入layui中的组件模块
  var layer = layui.layer
  var form = layui.form
  var laypage = layui.laypage
  // 定义一个查询的参数对象，将来请求数据的时候，
  // 需要将请求参数对象提交到服务器
  var q = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: '',
  }
  initTable()
  initCate()
  // 获取文章列表数据
  function initTable() {
    $.ajax({
      type: 'GET',
      url: '/my/article/list',
      data: q,
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg('获取数据失败')
        }
        var htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
        renderPage(res.total)
      },
    })
  }
  // 定义美化时间的过滤器
  template.defaults.imports.getTimer = function (date1) {
    //   将请求来的时间通过new Date() 将时间设置为标准时间格式
    var date1 = new Date(date1)
    var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    var year = date1.getFullYear()
    var month = date1.getMonth() + 1
    var datee = date1.getDate()
    var day = date1.getDay()
    var time = year + '年' + month + '月' + datee + '日     ' + week[day]
    function getTimerr() {
      var time = new Date()
      var hour = time.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var minute = time.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = time.getSeconds()
      second = second < 10 ? '0' + second : second
      return hour + ':' + minute + ':' + second
    }
    return time + ' ' + getTimerr()
  }

  // 初始化文章分类数据
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/cate/list',
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg('获取分类数据失败！')
        }
        // 调用模板引擎渲染分类的可选项
        var htmlStr = template('tpl-cate', res)
        $('[name=cate_id]').html(htmlStr)
        // 通过 layui 重新渲染表单区域的UI结构
        form.render()
      },
    })
  }
  // 给筛选按钮绑定提交事件,将要筛选的值上传到服务器
  $('#form-search').on('submit', function (e) {
    e.preventDefault()
    // 获取表单中选中项的值
    var cate_id1 = $('[name=cate_id]').val()
    var state1 = $('[name=state]').val()
    // 为查询参数对象 q 中对应的属性赋值
    q.cate_id = cate_id1
    q.state = state1
    // 根据最新的筛选条件，重新渲染表格的数据
    initTable()
  })
  // 定于分页模块的选项
  function renderPage(total) {
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数 由请求回来的数据决定
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      // 按照顺序排版分页区的内容
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 3, 5, 10], // 每页展示多少条
      // 当分页发生切换时,就会触发Jump函数
      jump: function ({ curr, limit }, first) {
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = curr
        // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
        q.pagesize = limit
        // 判断触发方式,防止死循环
        if (!first) {
          initTable()
        }
      },
    })
  }
  // 用事件代理的方式给删除按钮绑定点击事件
  $('body').on('click', '#delbtn', function () {
    // 获取删除按钮的个数,之后判断
    var len = $('#delbtn').length
    // 获取到文章的 id
    var id = $(this).attr('data-id')
    // 弹出询问用户是否要删除数据的确认框
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
      $.ajax({
        method: 'DELETE',
        url: '/my/article/info/?id=' + id,
        success: function (res) {
          if (res.code !== 0) {
            return layer.msg('删除文章失败！')
          }
          layer.msg('删除文章成功！')
          if (len === 1) {
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
          }
          initTable()
        },
      })

      layer.close(index)
    })
  })
})
